import * as React from 'react';
import './table.scss';

export const HSUITableItem = () => {
	return <div className="hs-ui-table-item"></div>;
};

export const HSUITable = ({ data, noDataTip, children }: { data: object[]; noDataTip: React.ReactNode; children: React.ReactNode }) => {
	console.log('data', data);
	console.log('children', children);
	return (
		<div className="hs-ui-table">
			<div className="hs-ui-table__no-data">{noDataTip ?? 'nodata'}</div>
			<table>
				<thead>
					<tr>
						{Object.keys(data[0]).map((key: any, index: any) => {
							return <th key={index}>{key}</th>;
						})}
					</tr>
				</thead>
				<tbody>
					{data.map((item: any, index) => {
						return (
							<tr key={index}>
								{Object.keys(item).map((key: any, index: any) => {
									return <td key={index}>{item[key]}</td>;
								})}
							</tr>
						);
					})}
					<tr>
						<td>Row 1, Cell 1</td>
						<td>Row 1, Cell 2</td>
						<td>Row 1, Cell 3</td>
					</tr>
					<tr>
						<td>Row 2, Cell 1</td>
						<td>Row 2, Cell 2</td>
						<td>Row 2, Cell 3</td>
					</tr>
				</tbody>
			</table>
		</div>
	);
};
